import { Component, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { Card, Col, Row } from 'ant-design-vue'
import { UserOutlined } from '@ant-design/icons-vue'
import StatisticalAnalysis from './StatisticalAnalysis'
import { getPaywageCount } from '@/api/record'
import dayjs from 'dayjs'
import type { PayOperateDto, PaywageCountDto, ProjectCountDto } from '@/api/record/types'
import SelectDate from '@/components/select-date/Index'

@Component
export class DataSummary extends Render {
    @Prop() companyId!: number

    startDate = dayjs().format('YYYY-MM-DD')
    endDate = dayjs().format('YYYY-MM-DD')

    operateData = {} as PayOperateDto

    countData = {} as ProjectCountDto

    async initData() {
        const res = await getPaywageCount({
            companyId: this.companyId,
            startTime: this.startDate,
            endTime: this.endDate
        })
        this.operateData = res.payOperate
        this.countData = res.projectCount
    }

    onChangeDate() {
        console.log(111)
        this.initData()
    }

    onMounted() {
        this.initData()
    }

    renderTab() {
        return 
    }

    render() {
        return <div>
            <Row justify="space-between">
                <Col>
                    <div class="flex">
                        <UserOutlined />
                        <span class="ml-8px text-lg tex-black-200">数据汇总</span>
                    </div>
                </Col>
                <Col>
                    <SelectDate v-model:startDate={this.startDate} v-model:endDate={this.endDate} onChange={this.onChangeDate}/>
                </Col>
            </Row>
            <div class="px-20px py-16px border-1 border-solid border-border-primary rounded-lg">
                <div class="text-lg mb-20px">运营数据</div>
                <Row justify={'space-between'}>
                    <Col lg={6}>
                        <div class="text-xxl font-bold">{this.operateData.payNum}</div>
                        <div class="text-sm text-black-300 ">发薪笔数</div>
                    </Col>
                    <Col lg={6}>
                        <div class="text-xxl font-bold">{this.operateData.payMoneyCount}</div>
                        <div class="text-sm text-black-300 ">发薪金额</div>
                    </Col>
                    <Col lg={6}>
                        <div class="text-xxl font-bold">{this.operateData.paidCount}</div>
                        <div class="text-sm text-black-300 ">已领薪人数</div>
                    </Col>
                    <Col lg={6}>
                        <div class="text-xxl font-bold">{this.operateData.paidMoney}</div>
                        <div class="text-sm text-black-300 ">已领薪金额</div>
                    </Col>
                </Row>
            </div>
            <div class="px-20px py-16px border-1 border-solid border-border-primary rounded-lg mt-20px">
                <div class="text-lg mb-20px">项目统计</div>
                <Row justify={'space-between'}>
                    <Col lg={6}>
                        <div class="text-xxl font-bold">{this.countData.dailyProjectCount}</div>
                        <div class="text-sm text-black-300 ">需打卡项目</div>
                    </Col>
                    <Col lg={6}>
                        <div class="text-xxl font-bold">{this.countData.quickProjectCount}</div>
                        <div class="text-sm text-black-300 ">快速发薪项目</div>
                    </Col>
                    <Col lg={6}>
                        <div class="text-xxl font-bold">{this.countData.longTimeProjectCount}</div>
                        <div class="text-sm text-black-300 ">无打卡项目</div>
                    </Col>
                    <Col lg={6}>
                        <div class="text-xxl font-bold">{this.countData.pcProjectCount}</div>
                        <div class="text-sm text-black-300 ">PC发薪项目</div>
                    </Col>
                </Row>
            </div>
            <div>
                <StatisticalAnalysis />
            </div>
        </div>
    }
}

export default toNative<{companyId: number}, {}>(DataSummary)